<template>
    <view>
        <block name="chat">
            <view class="item chat">
                <view id="js-barrage-content" class="c-chat barrage-container" style="display: block">
                    <view class="barrage-scroll">
                        <view class="barrage-box">
                            <view class="c-chat-tip">
                                <view>系统消息</view>
                                欢迎来到本直播间。系统会对聊天内容进行巡查，禁止传播封建迷信、暴力血腥、低俗色情、招嫖诈骗、违禁品等不良信息。
                            </view>

                            <view class="dm-item" v-if="socketError == 1">
                                <text style="padding-left: 5px">互动连接失败</text>
                                ，
                                <text style="color: #f50" @tap="openChat">点击重新连接</text>
                            </view>
                            <view class="dm-item" v-else>
                                <text style="padding-left: 5px">欢迎来到本直播间</text>
                            </view>
                            <!-- <view class="dm-item">
            <text>张三：</text><text style="color: #000;">萨拉肯德基阿斯卡纶的静安寺看吗，了就啊实打实大师大所大大？所大所</text>
          </view> -->
                            <view class="dm-item" v-for="(item, index) in chatMsgArr" :key="index">
                                <text :style="'color:' + (socketClientId == item.client_id ? '#2b94ff' : '#999')">{{ item.name }}：</text>

                                <text>{{ item.content }}</text>
                            </view>
                        </view>
                        <view class="barrage-tip"></view>
                    </view>
                </view>
                <view id="js-showGift-content" style="display: block"></view>
                <!-- <view class="Snackbar "><view class="Snackbar-text">打开斗鱼app，好多实用小功能和主播动态，都在等你~~~</view></view> -->
                <view class="c-operate" style="display: block">
                    <view class="c-operate-sub c-operate-input-wrap no-gifticon" v-if="socketClientName">
                        <input id="js-msg-input" class="c-operate-input" placeholder="说点什么吧~" :value="chatMessage" @input="inputChatMessage" />
                        <view class="c-operate-sendBtn" style="display: block" @tap="sendChatMessage">发送</view>
                    </view>
                    <view class="c-operate-sub c-operate-input-wrap no-gifticon" v-else>
                        <input id="js-msg-input" class="c-operate-input" placeholder="请先授权登录!~" value="请先授权登录!~" @tap="openChatCheck" />
                        <view class="c-operate-sendBtn" style="display: block" @tap="openChatCheck">登录</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>

<script>
// wxz_wzbagent/pages/menu/chat.js
export default {
    data() {
        return {
            socketError: 0,
            chatMsgArr: [],
            socketClientId: '',
            socketClientName: '',
            chatMessage: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        openChat() {
            console.log('占位：函数 openChat 未声明');
        },

        inputChatMessage() {
            console.log('占位：函数 inputChatMessage 未声明');
        },

        sendChatMessage() {
            console.log('占位：函数 sendChatMessage 未声明');
        },

        openChatCheck() {
            console.log('占位：函数 openChatCheck 未声明');
        }
    }
};
</script>
<style>
@import './chat.css';
</style>
